<template>
	<view>
		<!-- 顶部选项卡 -->
		<!-- scroll-row宽度100% 不要换行 -->
		<!-- 顶部选项卡 -->
		<scroll-view scroll-x :scroll-into-view="scrollInto" scroll-with-animation
		class="scroll-row border-bottom border-light-secondary" 
		style="height: 100rpx;">
			<view v-for="(item,index) in tabBars" :key="index" 
			class="scroll-row-item px-3 py-2 font-md" :id="'tab'+index"
			:class="tabIndex === index?'text-main font-lg font-weight-bold':''"
			@click="changeTab(index)">{{item.classname}}</view>
		</scroll-view>
		
		<swiper :duration="150" :current="tabIndex" @change="onChangeTab"
		:style="'height:'+scrollH+'px;'">
			<swiper-item v-for="(item,index) in newsList" :key="index">
				<scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'"
				@scrolltolower="loadmore(index)">
				
					<template v-if="item.list.length > 0">
						<!-- 列表 -->
						<block v-for="(item2,index2) in item.list" :key="index2">
							<!-- 列表样式 -->
							<common-list :item="item2" :index="index2" @follow="follow" @doSupport="doSupport"></common-list>
							<!-- 全局分割线 -->
							<divider></divider>
						</block>
						<!-- 上拉加载 -->
						<load-more :loadmore="item.loadmore"></load-more>
					</template>
					<!-- 刚开始加载的显示内容 -->
					<template v-else-if="!newsList[tabIndex].list.length">
						<view class="flex align-center justify-center font-lg text-secondary" style="height: 500rpx;">
							加载中...
						</view>
					</template>
					<!-- 无数据 -->
					<template v-else>
						<nothing></nothing>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
		
	</view>
</template>

<script>
	import commonList from '@/components/common/common-list.vue';
	import loadMore from '@/components/common/loadmore.vue';
	import nothing from '@/components/common/nothing.vue';
	export default {
		components:{commonList, loadMore, nothing},
		data() {
			return {
				newsList: [],
				scrollH: 600,
				// 顶部选项卡
				scrollInto:'',
				// 顶部选项卡激活序号
				tabIndex: 0,
				// 顶部选项卡元素
				tabBars:[],
				
			}
		},
		// 监听点击导航栏搜索框
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url: '../search/search?type=post',
			});
		},
		// 点击编辑发布页
		onNavigationBarButtonTap() {
			this.navigateTo({
				url:'../addInput/addInput'
			})
		},
		onLoad() {
			uni.getSystemInfo({
				success: res => {
					this.scrollH = res.windowHeight - uni.upx2px(100)
				}
			}),
			this.loadList()
		},
		methods: {
			// 将单列数据循环 让每个顶部选项卡都有对应的数据
			loadList() {
				// 获取分类
				this.$H.get('/postclass').then(res => {
					this.tabBars = res.list
					let arr = []
					for(let i = 0; i < this.tabBars.length; i++) {
						arr.push({
							// 上拉加载更多
							loadmore:'上拉加载更多',
							// 文章列表元素
							list:[],
							page:1
						})
					}
					this.newsList = arr
					// 获取第一个分类的数据
					if (this.tabBars.length) {
						this.getList()
					}
				})
				
			},
			// 获取指定列表下的文章数据
			getList() {
				let index = this.tabIndex
				let id = this.tabBars[index].id
				let page = this.newsList[index].page
				let isfresh = this.page === 1
				this.$H.get('/postclass/' + id + '/post/' + page).then(res => {
					let list = res.list.map(v => {
						// 目的是让后台的数据与之前的数据名称一致
						return this.$U.formatCommonList(v)
					})
					// 如果是第一页 直接赋值  如果不是  需要将所有数据一起赋值
					this.newsList[index].list = isfresh ? list : [...this.newsList[index].list, ...list],
					// 数据小于10条 后面就没有数据了
					this.newsList[index].loadmore = list.length < 10 ? '没有更多了' : '上拉加载更多'
				})
			},
			// 关注用户
			follow(index) {
				this.newsList[this.tabIndex].list[index].isFollow = true
				uni.showToast({
					title:'关注成功'
				})
			},
			// 支持或点踩
			doSupport(e) {
				let item = this.newsList[this.tabIndex].list[e.index]
				if (item.support.type === e.type) {
					return uni.showToast({
						title:'您已经操作过了，不能重复',
						icon:'none'
					})
				}
				let msg = e.type == 'support' ? '顶  + 1' : '踩  + 1'
				// 之前没有操作过
				if (item.support.type === '') {
					item.support[e.type+'_count'] ++
				} else if (item.support.type === 'support' && e.type === 'unsupport') {
					// 之前是支持 现在点反对
					item.support.unsupport_count ++
					item.support.support_count --
				} else if (item.support.type === 'unsupport' && e.type === 'support') {
					// 之前是反对 选择点支持
					item.support.unsupport_count --
					item.support.support_count ++
				}
				if (item.support.type === e.type) return
				item.support.type = e.type
				uni.showToast({
					title:msg
				})
			},
			// 点击tab栏
			changeTab(index) {
				if (index === this.tabIndex) {
					return
				} else {
					this.tabIndex = index
					// scrollInto要和前面定义的id一致 滚动到指定元素
					this.scrollInto = 'tab' + index
					// 在切换的时候如果已经加载过 就不重复加载了
					if (this.newsList[this.tabIndex].list.length) return
					this.getList()
				}
			},
			// 监听滑动
			onChangeTab(e) {
				// 与顶部选项卡关联
				this.tabIndex = e.detail.current
				// 在切换的时候如果已经加载过 就不重复加载了
				if (this.newsList[this.tabIndex].list.length) return
				this.getList()
			},
			// 上拉加载更多
			loadmore(index){
				// 拿到当前列表
				let item = this.newsList[index]
				// 判断是否处于可加载状态（上拉加载更多）
				if (item.loadmore !== '上拉加载更多') return;
				// 修改当前列表加载状态
				item.loadmore = '加载中...'
				// 请求数据
				item.page++;
				this.getList()
			}
		}
	}
</script>

<style>

</style>
